<template>
  <view>
    <view class="menuList">
      <view
        class="item"
        @click="showCity = true"
      >
        <span class="color-555 font-13">{{ city }}</span>
        <view class="triangle" />
      </view>
      <view
        v-if="showDistance"
        class="item"
        @click="sortChange('distanceTag')"
      >
        <span class="color-555 font-13">距离排序</span>
        <!-- <view :class="form.distanceTag ? 'triangle s':'triangle'" /> -->
        <view
          v-if="flag1==false"
          class="triangle"
        />
        <view
          v-else
          :class="form.distanceTag ? 'triangle s':'triangle d'"
        />
      </view>
      <view
        class="item"
        @click="sortChange('sellNumTag')"
      >
        <span class="color-555 font-13">销量排序</span>
        <!-- <view :class="form.sellNumTag ? 'triangle s':'triangle'" /> -->
        <view
          v-if="flag2==false"
          class="triangle"
        />
        <view
          v-else
          :class="form.sellNumTag ? 'triangle s':'triangle d'"
        />
      </view>
      <view
        class="item"
        @click="sortChange('priceTag')"
      >
        <span class="color-555 font-13">价格排序</span>
        <!-- <view :class="form.priceTag ? 'triangle s':'triangle'" /> -->
        <view
          v-if="flag3==false"
          class="triangle"
        />
        <view
          v-else
          :class="form.priceTag ? 'triangle s':'triangle d'"
        />
      </view>
      <!-- <view
        v-show="travelShow||tripShow"
        class="menuSearch"
      >
        <view
          v-show="travelShow"
          class="head"
        >
          <span>出游人数：</span>
          <uni-number-box
            :min="0"
            :max="99"
            :value="form.number"
            class="number_box"
            @change="changeNumber"
          />
        </view>
        <view
          v-show="tripShow"
          class="head"
        >
          <span>行程人数：</span>
          <uni-number-box
            :min="0"
            :max="99"
            :value="form.day"
            class="number_box"
            @change="changeDay"
          />
        </view>
        <view class="btn">
          确定
        </view>
      </view> -->
    </view>
    <popup-layer
      ref="popupRef"
      :direction="'left'"
      :show-pop="showCity"
    >
      <city-menu
        @cityClose="cityClose"
        @citySearch="citySearch"
      />
    </popup-layer>
  </view>
</template>

<script>
	import cityMenu from '@/components/cityMenu/index.vue';
	import popupLayer from 'components/popup-layer/popup-layer.vue';
	// import uniIcons from '@/components/uni-icons/uni-icons.vue';
	let timer=null

	export default {
		name: 'SortMenu',
    components: {
			cityMenu,
			popupLayer
		},
		props: {
			showDistance: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				showCity: false,
        city: '城市',
				form: {
					distanceTag:false,
          sellNumTag: false,
          priceTag: false,
				},
        flag1:false,
        flag2:false,
        flag3:false,
			};
		},
		destroyed() {
			timer=null
			clearTimeout(timer)
		},
		methods: {
			sortChange(type) {
				if(timer){
					clearTimeout(timer)
				}
				uni.showLoading({
				  title: '加载中',
					mask:true
				});
				this.form.flag=true;
				if(type=='distanceTag'){
				this.flag1=true;
				this.flag2=false;
				this.flag3=false;
				}else if(type=='sellNumTag'){
				this.flag2=true;
				this.flag1=false;
				this.flag3=false;
				}else {
				this.flag3=true;
				this.flag1=false;
				this.flag2=false;
				}
				const val = !this.form[type];
				// 重置下过滤状态标志
				this.form = {
				  distanceTag: false,
				  sellNumTag: false,
				  priceTag: false
				};
				this.form[type] = val;
				timer=setTimeout(()=>{
					this.$emit('sort', {val, type});
				},300)
      },
      cityClose() {
        this.showCity = false;
      },
      citySearch(e) {
        this.showCity = false;
        this.city = e;
        const val = e === '全国' ? '' : e;
				this.$emit('citySearch', val);
      },
      reset() {
        this.form = {
            distanceTag: false,
            sellNumTag: false,
            priceTag: false
        };
        this.city = '城市';
      }
		},
	};
</script>

<style lang="less" scoped>
	.menuList {
      display: flex;
      margin-top: 30upx;
      padding: 0 20upx;
      position: relative;

      .item {
        display: flex;
        margin-right: 10upx;
        align-items: baseline;
      }

      .triangle {
        width: 0;
        height: 0;
        border-top: 14upx solid #ccc;
        border-left: 10upx solid transparent;
        border-right: 10upx solid transparent;
        margin: 10upx 14upx 0;

        // transition: all ease .5s;
        &.s {
          border-top: 0;
          border-bottom: 14upx solid #FFD302;
        }
        &.d {
          border-top: 14upx solid #FFD302;
        }
      }

      .menuSearch {
        position: absolute;
        left: 0;
        top: 40upx;
        background: #fff;
        right: 0;
        padding: 30upx;
        z-index: 99;

        .head {
          display: flex;
          border-bottom: 1px dashed #d1d1d1;
          justify-content: space-between;
          padding-bottom: 16upx;
          margin-bottom: 16upx;
        }

        .btn {
          width: 610upx;
          height: 82upx;
          background: linear-gradient(312deg, #FFE955 0%, #FFD302 100%);
          border-radius: 40px;
          text-align: center;
          line-height: 82upx;
          color: #fff;
          font-size: 32upx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
        }
      }
    }
</style>
